// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, Dimensions, TouchableOpacity} from 'react-native';
import AllStyle from '../../../../style';
import {CalendarProvider, ExpandableCalendar, LocaleConfig} from 'react-native-calendars';
import {CardItem} from '../../../../componet/settingComponent/CardItem';
import {BrLine} from '../../../../componet/settingComponent/BrLine';
import {getDaySignRecord, getTeamMonthSignRecord} from '../../../../api/empActual';
import {getDate} from '../../../../utils/DateUtils';
import {Toast} from '../../../../utils/Toast';

// LocaleConfig.locales['fr'] = {
//     monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
//     monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
//     dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
//     dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
//     today: '到今天',
// };
// LocaleConfig.defaultLocale = 'fr';

const width = Dimensions.get('window').width;

/**
 * @Description:
 * @author TangYong
 * @date 2023/2/8
 */
export class TeamStatistics extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            calendarDate:getDate(new Date(), 'yyyy-MM-dd').toString(),
            TeamStatisticsData:{
                dueNum:0,
                unclockedList:[],
                yetSignList:[]
            },
            TeamMonthStatisticsData:{
                beLateDataList:[],
                earlyDataList:[],
                lackDataList:[],
                absenteeismDataList:[],
            },
            dAndMVal: true,
        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
        this.getDayData(getDate(new Date(), 'yyyy-MM-dd').toString())
        this.getMonthData();
    }
    getDayData(date){
        let pr={}
        pr.expectSignDate = date + ' 00:00:00';
        getDaySignRecord(pr).then(res=>{
            let data=res.data;
            this.setState({TeamStatisticsData:data})
            // console.log()
        }).catch(err=>{
            Toast.showWarning(err.toString())
        })


    }
    getMonthData(){
        let pr={}
        pr.expectSignDate = getDate(new Date(), 'yyyy-MM-dd').toString() + ' 00:00:00';
        getTeamMonthSignRecord(pr).then(
            res=>{
                let data=res.data;
                this.setState({TeamMonthStatisticsData:data})
                console.log("TeamMonthStatisticsData",data)
            }
        ).catch(err=>{
            Toast.showWarning(err.toString())
        })
    }

    //方法
    goto = (name, params) => {
        console.log(name);

        const route = {
            name: name,
            params: {
                //routePathName: this.props.route.name,
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };
    changedAndMVal = (val) => {
        this.setState({dAndMVal: val})
    };
    onDateChanged = (date) => {
        // console.log(1,date)

        this.setState({calendarDate: date});
        //alert('onMonthChange')
        this.getDayData(date);
    };

    //DOM
    render() {
        return (
            <View>
                <View style={[AllStyle.card]}>
                    <TouchableOpacity onPress={() => {
                        this.goto('reportForm', {});
                    }}>
                        <CardItem title={'导出报表'} value={'考勤汇总'}></CardItem>
                    </TouchableOpacity>

                </View>

                <View style={[AllStyle.card]}>
                    <View style={style.card_top}>
                        <View style={style.top_l}>
                            <Text style={{fontSize: 18, fontWeight: '500'}}>分类统计</Text>
                        </View>
                        <View style={style.top_r}>
                            <View style={style.r_container}>
                                <TouchableOpacity onPress={() => {
                                    this.changedAndMVal(true);
                                }}>
                                    <View style={[style.top_r_btnW, this.state.dAndMVal && {backgroundColor: '#fff'}]}>
                                        <Text>按日统计</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => {
                                    this.changedAndMVal(false);
                                }}>
                                    <View
                                        style={[style.top_r_btnM, this.state.dAndMVal == false && {backgroundColor: '#fff'}]}>
                                        <Text>当月统计</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>

                        </View>
                    </View>
                    <BrLine></BrLine>
                    <View style={[{width: width - 60}, this.state.dAndMVal == false && {display: 'none'}]}>
                        {this.state.dAndMVal == true &&
                        <CalendarProvider
                            date={getDate(new Date(), 'yyyy-MM-dd').toString()}
                            // showTodayButton
                            style={{}}
                            //date={ITEMS[0].title}
                            onDateChanged={(date)=>this.onDateChanged(date)}
                            //onMonthChange={this.onMonthChange}
                            // disabledOpacity={0.6}
                            theme={{
                                todayTextColor: '#fff',
                                calendarBackground: 'red',
                            }}
                            // todayBottomMargin={60}
                        >
                            <ExpandableCalendar
                                allowShadow={false}
                                pastScrollRange={3}
                                testID={'calendars'}
                                openThreshold={1}

                                calendarWidth={width - 60}
                                futureScrollRange={1}
                                horizontal={true}
                                hideArrows={true}
                                disablePan={false}
                                hideKnob={false}
                                //initialPosition={ExpandableCalendar.positions.OPEN}
                                // calendarStyle={styles.calendar}
                                // headerStyle={styles.calendar} // for horizontal only
                                //disableAllTouchEventsForDisabledDays={true}
                                //disableWeekScroll={true}
                                // theme={this.getTheme()}
                                firstDay={1}
                                // markedDates={this.getMarkedDates()}
                                // leftArrowImageSource={require('../img/previous.png')}
                                //rightArrowImageSource={require('../img/next.png')}
                            />
                        </CalendarProvider>
                        }


                        <BrLine></BrLine>
                        <View style={[style.mouth_Jgg]}>
                            <View style={style.mouth_Jgg_one}>
                                <TouchableOpacity onPress={() => {
                                    this.goto('clockingDetails', {date:this.state.calendarDate,choseVal:true});
                                }}>
                                    <View style={style.mouth_Jgg_item}>
                                        <Text style={style.mouth_Jgg_item_num}>{this.state.TeamStatisticsData.dueNum}</Text>
                                        <Text style={style.mouth_Jgg_item_text}>应到人数</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => {
                                    this.goto('clockingDetails', {date:this.state.calendarDate,choseVal:true});
                                }}>
                                <View style={style.mouth_Jgg_item}>
                                    <Text style={style.mouth_Jgg_item_num}>{this.state.TeamStatisticsData.yetSignList.length}</Text>
                                    <Text style={style.mouth_Jgg_item_text}>实到人数</Text>
                                </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => {
                                    this.goto('clockingDetails', {date:this.state.calendarDate,choseVal:false});
                                }}>
                                <View style={style.mouth_Jgg_item}>
                                    <Text style={style.mouth_Jgg_item_num}>{this.state.TeamStatisticsData.unclockedList.length}</Text>
                                    <Text style={style.mouth_Jgg_item_text}>缺卡人数</Text>
                                </View>
                                </TouchableOpacity>
                            </View>

                        </View>
                    </View>
                    <View style={[style.mouth_Jgg, this.state.dAndMVal && {display: 'none'}]}>
                        <View style={style.mouth_Jgg_one}>
                            <TouchableOpacity onPress={() => {
                                this.goto('monthStatistics', {dAndMVal:4});
                            }}>
                                <View style={style.mouth_Jgg_item}>
                                    <Text style={style.mouth_Jgg_item_num}>{this.state.TeamMonthStatisticsData.beLateDataList.length}</Text>
                                    <Text style={style.mouth_Jgg_item_text}>迟到人数</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {
                                this.goto('monthStatistics', {dAndMVal:5});
                            }}>
                            <View style={style.mouth_Jgg_item}>
                                <Text style={style.mouth_Jgg_item_num}>{this.state.TeamMonthStatisticsData.earlyDataList.length}</Text>
                                <Text style={style.mouth_Jgg_item_text}>早退人数</Text>
                            </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {
                                this.goto('monthStatistics', {dAndMVal:3});
                            }}>
                            <View style={style.mouth_Jgg_item}>
                                <Text style={style.mouth_Jgg_item_num}>{this.state.TeamMonthStatisticsData.lackDataList.length}</Text>
                                <Text style={style.mouth_Jgg_item_text}>缺卡人数</Text>
                            </View>
                            </TouchableOpacity>

                        </View>
                        <View style={style.mouth_Jgg_one}>
                            <TouchableOpacity onPress={() => {
                                this.goto('monthStatistics', {dAndMVal:2});
                            }}>
                            <View style={style.mouth_Jgg_item}>
                                <Text style={style.mouth_Jgg_item_num}>{this.state.TeamMonthStatisticsData.absenteeismDataList.length}</Text>
                                <Text style={style.mouth_Jgg_item_text}>旷工人数</Text>
                            </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>
        );
    }

}

const style = StyleSheet.create({
    card_top: {
        marginTop: 15,
        marginBottom: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    top_l: {
        // backgroundColor:'red',
        justifyContent: 'center',
    },
    top_r: {
        //backgroundColor:'red',
        // width: (width - 60) / 2,
        justifyContent: 'center',
        alignItems: 'flex-end',
    },
    r_container: {
        backgroundColor: '#DCDFE6',
        flexDirection: 'row',
        padding: 2,
        borderRadius: 5,
    },
    top_r_btnW: {
        // width: 40,
        padding: 5,
        height: 30,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,

    },
    top_r_btnM: {
        padding: 5,
        // width: 40,
        height: 30,
        // backgroundColor:'#409EFF',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,

    },
    //样式
    mouth_Jgg: {
        width: width - 60,
    },
    mouth_Jgg_one: {
        margin: 15,
        width: width - 60 - 30,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    mouth_Jgg_item: {
        alignItems: 'center',
    },
    mouth_Jgg_item_num: {
        marginTop: 5,
        marginBottom: 5,
        fontSize: 20,
        fontWeight: 'bold',

    },
    mouth_Jgg_item_text: {
        color: '#798189',
    },
    mouth_Jgg_select: {
        padding: 15,
        alignItems: 'center',
    },
});

